<template>
    <div>
        <svg
            :class="{'is-active':isActive}"
            class="hamburger"
            width="200" height="200" viewBox="0 0 15 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            @click="toggleClick">
            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="编组-11" transform="translate(-4.000000, -6.000000)">
                    <rect id="矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="22" height="22"></rect>
                    <g id="编组-2备份" transform="translate(5.000000, 7.000000)" stroke="#979797" stroke-linecap="round" stroke-width="1.5">
                        <line x1="0.5" y1="0.363636364" x2="0.5" y2="7.63636364" id="直线-2"></line>
                        <line x1="6.5" y1="0.363636364" x2="6.5" y2="7.63636364" id="直线-2备份"></line>
                        <line x1="12.5" y1="0.363636364" x2="12.5" y2="7.63636364" id="直线-2备份-2"></line>
                    </g>
                </g>
            </g>
        </svg>
    </div>
</template>

<script>
    export default {
        name: 'Hamburger',
        props: {
            isActive: {
                type: Boolean,
                default: false
            },
            toggleClick: {
                type: Function,
                default: null
            }
        }
    }
</script>

<style scoped>
    .hamburger {
        display: block;
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin: 0 auto;
    }

    .hamburger.is-active {
        transform: rotate(180deg);
    }
</style>
